import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AlertCircle, Upload } from "lucide-react";

export function BulkAddUsersDialog({ open, onOpenChange }) {
  const [tab, setTab] = useState("csv");
  const [csvText, setCsvText] = useState("");
  const [role, setRole] = useState("");
  const [department, setDepartment] = useState("");
  const [file, setFile] = useState(null);

  const handleSubmit = () => {
    // 这里添加提交逻辑
    if (tab === "csv") {
      console.log("提交CSV数据", { csvText, role, department });
    } else {
      console.log("提交文件", { file, role, department });
    }
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className='sm:max-w-[600px]'>
        <DialogHeader>
          <DialogTitle>批量添加用户</DialogTitle>
          <DialogDescription>
            通过CSV文本或上传文件批量添加多个用户。
          </DialogDescription>
        </DialogHeader>

        <Tabs defaultValue='csv' value={tab} onValueChange={setTab}>
          <TabsList className='grid w-full grid-cols-2'>
            <TabsTrigger value='csv'>CSV文本</TabsTrigger>
            <TabsTrigger value='file'>上传文件</TabsTrigger>
          </TabsList>

          <TabsContent value='csv' className='space-y-4 py-4'>
            <Alert>
              <AlertCircle className='h-4 w-4' />
              <AlertTitle>提示</AlertTitle>
              <AlertDescription>
                请按照以下格式输入：姓名,邮箱，每行一个用户
              </AlertDescription>
            </Alert>

            <div className='grid gap-4'>
              <div>
                <Label htmlFor='csv-text'>用户数据</Label>
                <Textarea
                  id='csv-text'
                  placeholder='张三,zhangsan@example.com&#10;李四,lisi@example.com'
                  className='h-40 mt-1.5'
                  value={csvText}
                  onChange={(e) => setCsvText(e.target.value)}
                />
              </div>

              <div className='grid grid-cols-2 gap-4'>
                <div>
                  <Label htmlFor='role'>默认角色</Label>
                  <Select
                    value={role}
                    onValueChange={setRole}
                    className='mt-1.5'
                  >
                    <SelectTrigger>
                      <SelectValue placeholder='选择角色' />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value='管理员'>管理员</SelectItem>
                      <SelectItem value='编辑者'>编辑者</SelectItem>
                      <SelectItem value='查看者'>查看者</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label htmlFor='department'>默认部门</Label>
                  <Select
                    value={department}
                    onValueChange={setDepartment}
                    className='mt-1.5'
                  >
                    <SelectTrigger>
                      <SelectValue placeholder='选择部门' />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value='产品部'>产品部</SelectItem>
                      <SelectItem value='市场部'>市场部</SelectItem>
                      <SelectItem value='销售部'>销售部</SelectItem>
                      <SelectItem value='技术部'>技术部</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
          </TabsContent>

          <TabsContent value='file' className='space-y-4 py-4'>
            <Alert>
              <AlertCircle className='h-4 w-4' />
              <AlertTitle>提示</AlertTitle>
              <AlertDescription>
                请上传CSV格式文件，第一列为姓名，第二列为邮箱
              </AlertDescription>
            </Alert>

            <div className='grid gap-4'>
              <div className='border-2 border-dashed rounded-md p-6 text-center'>
                <Upload className='mx-auto h-8 w-8 text-muted-foreground' />
                <p className='mt-2 text-sm font-medium'>
                  将文件拖放到此处或点击上传
                </p>
                <Input
                  type='file'
                  className='hidden'
                  id='file-upload'
                  accept='.csv'
                  onChange={(e) => setFile(e.target.files[0])}
                />
                <Button
                  variant='outline'
                  className='mt-4'
                  onClick={() => document.getElementById("file-upload").click()}
                >
                  选择文件
                </Button>
                {file && <p className='mt-2 text-sm'>已选择: {file.name}</p>}
              </div>

              <div className='grid grid-cols-2 gap-4'>
                <div>
                  <Label htmlFor='role-file'>默认角色</Label>
                  <Select
                    value={role}
                    onValueChange={setRole}
                    className='mt-1.5'
                  >
                    <SelectTrigger>
                      <SelectValue placeholder='选择角色' />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value='管理员'>管理员</SelectItem>
                      <SelectItem value='编辑者'>编辑者</SelectItem>
                      <SelectItem value='查看者'>查看者</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label htmlFor='department-file'>默认部门</Label>
                  <Select
                    value={department}
                    onValueChange={setDepartment}
                    className='mt-1.5'
                  >
                    <SelectTrigger>
                      <SelectValue placeholder='选择部门' />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value='产品部'>产品部</SelectItem>
                      <SelectItem value='市场部'>市场部</SelectItem>
                      <SelectItem value='销售部'>销售部</SelectItem>
                      <SelectItem value='技术部'>技术部</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
          </TabsContent>
        </Tabs>

        <DialogFooter>
          <Button variant='outline' onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={handleSubmit}>导入用户</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
